<template>
  <div class="person_main">
    <p class="mesg_tit">基本信息</p>
    <div v-loading="loading">
      <div class="person_mesg clearfix" >
        <div class="person_list clearfix" >
          <span class="person_listtit fl">姓名：</span>
          <div class="person_text">{{name}}</div>
        </div>
      </div>

      <div class="person_mesg clearfix" >
        <div class="person_list clearfix" >
          <span class="person_listtit fl">工号：</span>
          <div class="person_text">{{accountid}}</div>
        </div>
      </div>

      <div class="person_mesg clearfix" >
        <div class="person_list fl clearfix" >
          <span class="person_listtit fl">账号：</span>
          <div class="person_text">
            {{account}}
            <a class="editMesgBtn editpass_btn" @click="editpassword" v-if="roleIdFlag ==4?false:true">修改密码</a>
          </div>
          
        </div>
      </div>

      <div class="person_mesg clearfix" >
        <div class="person_list fl clearfix" >
          <span class="person_listtit fl">角色：</span>
          <div class="person_text">{{role}}</div>
        </div>
      </div>
      <div class="person_mesg clearfix" >
        <div class="person_list fl clearfix" >
          <span class="person_listtit fl">手机号：</span>
          <div class="person_text">
            {{phone}}
            <a class="editMesgBtn editphone_btn" @click="editPhone" v-if="roleIdFlag ==4?false:true">修改手机号码</a>
          </div>
          
        </div>
      </div>
    </div>
    

   
    <!-- gm修改密码gm -->
    <el-dialog title="修改密码" 
               :visible.sync="dialogFoSrmVisible" 
               center 
               width="500px" 
               :close-on-click-modal="false" 
               :show-close="false">
      <el-form :model="form" :rules="rulesPassword" ref="form" label-width="100px">
        <el-form-item label="原始密码">
          <el-input key="passwordtext" type="password" autocomplete="off" v-model="form.oldPassword" @blur="onBlur"></el-input>
        </el-form-item>
         <el-form-item label="新密码" prop="newPassword">
          <el-input  key="newpdtext" type="password" autocomplete="off" v-model="form.newPassword"></el-input>
        </el-form-item>
         <el-form-item label="重复密码" prop="aginNewPassword">
          <el-input key="agnewpdtext" type="password" autocomplete="off" v-model="form.aginNewPassword"></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEvent('form')">取 消</el-button>
        <el-button type="primary" @click="trueBtn('form')">确 定</el-button>
      </div>
    </el-dialog>
     <!-- gm修改密码gm -->
     <!-- gm修改密码gm -->
    <el-dialog title="修改手机号码" 
               :visible.sync="phoneFormVisible" 
               center 
               width="500px" 
               :close-on-click-modal="false" 
               :show-close="false">
      <div class="popline clearfix">
        <label class="poplabel">原手机号</label>
        <div class="poptext">{{phone}}</div>
      </div>
      <el-form :model="formPhone" :rules="rulesPhone" ref="formPhone" label-width="100px">
         <el-form-item label="新手机号" prop="new_phone">
          <el-input key="new_phone" type="text" autocomplete="off" v-model="formPhone.new_phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEvent('formPhone')">取 消</el-button>
        <el-button type="primary" @click="iphoneBtn('formPhone')">确 定</el-button>
      </div>
    </el-dialog>
     <!-- gm修改密码gm -->


  </div>
</template>
<script>
import bus from '@/api/bus'
import { checkPassword, changePassword, updateTelephone, getUserByUid } from '@/api'
  export default {
    data() {
      const validateOldPassword = (rule, value, callback) => {
        if (this.oldPsd == value) {
          callback()
        } else {
          callback(new Error('输入的密码与旧密码不一致'))
        }
      }
      const validatePassword = (rule, value, callback) => {
        let reg = /[\w\d_]{6,16}/;
        if (value != '' && reg.test(value)) {
          callback()
        } else {
          callback(new Error('请正确输入密码'))
        }
      }
      const validateAginPassword = (rule, value, callback) => {
        if (value === this.form.newPassword) {
          callback()
        } else {
          callback(new Error('输入的密码和新设置的密码不一致'))
        }
      }
      const validatePhone = (rule, value, callback) => {
        let reg = /^1[345789]\d{9}$/;
        if (value != '' && reg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号'))
        }
      }
      return {
        roleIdFlag:'',//根据角色id判断是否显示
        roleId:'',
        dialogFoSrmVisible: false,
        phoneFormVisible:false,
        name:"",
        accountid:"",
        account:"",
        role:"",
        // post:"坐席经理",
        phone:"",
        loading: true,
        form: {
          oldPassword: '',
          newPassword: '',
          aginNewPassword: ''
        },
        formPhone: {
          new_phone: ''
        },
        rulesPhone: {
          new_phone:[{
            validator: validatePhone,
					  trigger: 'change'
          }]
        },
        rulesPassword: {
          newPassword: [{
            validator: validatePassword,
					  trigger: 'change'
          }],
          aginNewPassword:[{
            validator: validateAginPassword,
					  trigger: 'change'
          }]
        }
      };
    },
    created () {
      console.log(sessionStorage.getItem('account'))
      let account = sessionStorage.getItem('account');
      let userId = JSON.parse(sessionStorage.getItem('userInfo')).userId;
      let roleNumber =JSON.parse(sessionStorage.getItem('userInfo')).roleId;
      this.roleIdFlag =roleNumber
      let params = {
        //userId: userId,
        account:account
      }
     this.getUserByUid(params)
    },
    methods:{
      cancelEvent(formName) {
        this.dialogFoSrmVisible = false
        this.phoneFormVisible = false
        this.$refs[formName].resetFields()
      },
      getUserByUid (params) {
        getUserByUid(params).then(res => {
          let code = res.data.code
          if (code == 0) {
            let data = res.data.data
            this.account = data.account
            this.name = data.userName
            this.phone = data.phone
            this.accountid = data.userId
            this.role = data.roleName
            this.loading = false
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        })
      },
      editpassword(){
				this.dialogFoSrmVisible = true
				this.form.newPassword = ""
				this.form.aginNewPassword =""
				this.form.oldPassword = ""
      },
      editPhone() {
        this.phoneFormVisible = true
        this.formPhone.new_phone = ''
      },
      onBlur () {
        let params = {
          password: this.form.oldPassword
        }
        checkPassword(params).then(res => {
          let code = res.data.code
          if (code == 1) {
            this.form.oldPassword = ""
            this.$message({
							message: res.data.msg
            })
          }
        })
      },
      trueBtn (form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.form.oldPassword != '') {
              let params = {
                password: this.form.newPassword
              }
              changePassword(params).then(res => {
                let code = res.data.code
                if (code == 0) {
                  this.dialogFoSrmVisible = false
                  this.$message({
                    message: '密码修改成功'
                  });
                } else if (code == 1) {
                  this.$message({
                    message: res.data.msg
                  })
                }
              })
            } else {
              this.$message({
                message: '请输入原密码'
              })
            }
          } else {
            //console.log('error submit!!');
					  return false;
          }
        })
        this.$refs[form].resetFields()
			},
      iphoneBtn (formPhone) {
        this.$refs[formPhone].validate((valid) => {
          if (valid) {
            let params = {
              phone: this.formPhone.new_phone
            }
            updateTelephone(params).then(res => {
              let code = res.data.code
              if (code == 0) {
                this.phoneFormVisible = false
                let userId = JSON.parse(sessionStorage.getItem('userInfo')).userId
                let params = {
                  userId: userId
                }
                getUserByUid(params).then(res => {
                  let data = res.data.data
                  this.account = data.account
                  this.name = data.userName
                  this.phone = data.phone
                  this.accountid = data.userId
                  this.role = data.roleName
                })
              } else if (code == 1) {
                this.$message({
                  message: res.data.msg
                })
                this.phoneFormVisible = true
              }
            })
          }
        })
        this.$refs[formPhone].resetFields()
      }
    }
  };
</script>
<style scoped>
  .person_mesg{padding:20px 0 0;}
  .person_listtit{display:inline-block;width:140px;line-height:40px;padding-right:10px;text-align:right;}
  .person_text{overflow:hidden;line-height:40px;}
  .editpass_btn,.editphone_btn{margin-left:20px;color:#01d39b;cursor:pointer;}
</style>